<template>
	<view class="">
			<view class="cai-modal">
				<view class="cu-modal bottom-modal" 
				:class="modalName == 'bottomModal'?'show':''"
				@click.prevent="hideModal"
				>
					<view class="cu-dialog">
						<view class="padding-xl">
							<text :style="{fontSize: titleFontSize+'rpx'}">
								{{ title }}
							</text>
							<view class="subtitle" v-if="subtitle">
								{{ subtitle }}
							</view>
						</view>
						<view class="cu-bar bg-white" :class="{onlyDefine:onlyDefine}">
							<button class="action action-cancel cai-font-bold" @click.stop="hideModal" v-if="!onlyDefine">
								{{ cancelText }}
							</button>
							<button class="action action-define cai-font-bold clickc" @click.stop="defineModal">
								{{ defineText }}
							</button>
						</view>
					</view>
				</view>
			</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			eventMask: {
				type: String,
				default: ''
			},
			title: {
			  type: String,
			  default: '是否确认？'
			},
			titleFontSize: {
				type: String,
				default: '32'
			},
			subtitle: {
				type: String,
				default: ''
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			defineText: {
				type: String,
				default: '确认'
			},
			isTabbar: {
				type: Boolean,
				default: false
			},
			onlyDefine: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				modalName: null,
				showModalStatus: false,
			}
		},
		computed: {
			isTabbar2() {
				return this.isTabbar
			}
		},
		methods:{
			showModal(e) {
				this.modalName = 'bottomModal';
				this.showModalStatus = true;
			},
			hideModal(e) {
				this.modalName = null
				this.showModalStatus = false;
				this.$emit('clickHideTabbar', '')
			},
			defineModal() {
				this.$emit('clickDefine', '')
			}
		}
	}
</script>

<style lang="scss">

.cai-modal{
	position: fixed;
	width: 750rpx;
	/* #ifdef H5 */
	bottom: 100rpx;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	bottom: 0;
	/* #endif */
	z-index: 96;
	.cu-bar{
		display: flex;
	}
	.cu-modal{
		text-align: center;
		.padding-xl{
			padding:32rpx;
			text-align: center;
		}
	}
}
.onlyDefine{
	.action-define{
		width: 100%;
	}
}
.action-define{
	background-color: ($cor);
}
</style>
